<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>组件组合使用</title>
</head>
<body>

  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入传参限制库 -->
  <script type="text/javascript" src="../js/prop-types.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  
  <script type="text/babel">

    //App 应用组件(最外层的组件)
      class App extends React.Component {

        state = {
          todosArr:['吃饭','睡觉','学习']
        }
        addTodo = (data) => {
            //alert(data)
            // 获取原状态中的todo 数组
            let {todosArr} = this.state
            // 向todo 数组中追加一条数据
            todosArr.unshift(data)
            // 更新状态
            this.setState({todosArr:todosArr})

        }
        //状态在哪个组件里 更新状态的方法就在哪个组件里
        render() {
          let {todosArr} = this.state
          return (
            <div>
               <h1>Simple TODO List</h1> 
               <Add addTodo = {this.addTodo}   count = {todosArr.length}/>
               <List todosArr = {todosArr}/>
            </div>
          )
        }
      }

      // Add ----用于添加一条数据
      class Add extends React.Component {
        add = () => {
          // 输入函数体
          // 1.获取用户输入
          let userInput = this.input.value 
          // 2.校验数据
          if (userInput.trim() === '') return 
          // 3.将用户的输入添加到状态里
          this.props.addTodo(userInput)
          // 4.清空输入段
          this.input.value = ''
        }
        render() {
          let {count} = this.props 
          return (
            <div>
              <input type="text" ref = {(input) => {this.input = input}}/>
              <button onClick = {this.add}>Add #{count}</button>
            </div>
          )
        }
      }
 
      // list 组件---- 用于展示列表
      class List extends React.Component {
        render() {
          let {todosArr} = this.props 
          return (
            <ul>
              {todosArr.map((item,index) => <li key = {index}>{item}</li>)} 
            </ul>
          )
        }
      }
      ReactDOM.render(<App/>,document.getElementById('example')) 
</script>
</body>
</html>
</body>
</html>